<template>
	<div class="mobile_home">
		<!-- 轮播区域 -->
		<div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="10rem">
			    <el-carousel-item v-for="item in HotBanner" :key="item.id">
			      <img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`"/>
			    </el-carousel-item>
			  </el-carousel>
		</div>
		<!-- 传递的数据如果是固定的字符串，那么不需要v-bind指令 -->
		<MobileHomeList proptitle="热门推荐"></MobileHomeList>
		<MobileHomeList proptitle="新书上市"></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileHome',
		components: {
			MobileHomeList
		},
		data() {
			return {
				bannerlist: [
				]
			}
		},
		computed : {
			HotBanner(){
				this.bannerlist.sort((a1,a2)=>{
					return a2.hot - a1.hot
				})
				// forEach/for..in/for..of: 都是可以再需要限制输出的数据数量模板使用
				// map 基本确定不会再更改数组的长度，只不过数据的内容发生格式化的改变
				let arr = [];
				this.bannerlist.forEach((item,i)=>{
					if( i < 4){
						arr.push(item);
					}
				})
				return arr;
			}
		},
		created() {
			this.$get('/api/public/findHot/1/6').then((resp)=>{
				this.bannerlist = resp.data.data;
			});
		}
	}
</script>

<style scoped>
	.mobile_home {
		background-color: #f5d5a0;
		position: relative;
		top: 56px;
	}
	.mobile_home .banner{
		width: 100%;
		height: 10rem;
	}
	.mobile_home .banner img{
		width: 100%;
		height: 100%;
	}
	/* 穿刺：css用于修改固定组件样式的操作 */
	.mobile_home .banner .el-carousel /deep/ .el-carousel__button{
		height: 5px !important;
	}
	.mobile_home .banner .el-carousel /deep/ .is-active .el-carousel__button{
		background-color: #a68b5b !important;
	}
</style>